<script setup>
  import Sidebar from '@/components/Sidebar.vue'
  import THeader from '@/components/Header.vue'
  import { computed } from 'vue'
  import { useUserStore } from '@/store'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()

  const props = defineProps({
    routes: { type: Object, required: true },
  })

  const routes = computed(() => {
    const basePath = props.routes.path
    return props.routes.children.map(route => {
      return { label: route.meta.title, path: `${basePath}/${route.path}` }
    })
  })

  const onLogout = () => {
    const userStore = useUserStore()

    userStore.logout()
    router.push('/login')
  }
</script>

<template>
  <div class="layout">
    <sidebar :routes="routes" @logout="onLogout" />
    <div class="flex-col flex-1">
      <t-header>
        <h1 class="header-title">{{ route.meta.title }}</h1>
        <slot name="header"></slot>
      </t-header>
      <div class="flex-1">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
  .layout {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .header-title {
    color: var(--primary-700);
    margin-left: 16px;
    font-size: 28px;
    font-weight: bold;
  }
</style>
